<template>
  <el-form :rules="rules" ref="formRef" :model="formData" style="width: 645px;margin-top: 20px" :label-width="130" >
    <el-input type="text" v-model="formData.id" v-show="false"></el-input>
    <el-row>
      <el-col span="24">
        <el-form-item  label="">
          <el-radio-group v-model="formData.volumeType">
            <el-radio aria-checked="true" label="外部文件" value="1"></el-radio>
            <el-radio label="数据卷" value="2"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-for="(item,index) in formData.dockerDeployVolumeList" style="width: 800px;">
      <el-col span="11">
        <el-form-item  label="宿主机绝对路径">
          <el-input v-model="item.hostPath"></el-input>
        </el-form-item>
      </el-col>
      <el-col span="11">
        <el-form-item  label="容器内绝对路径">
          <el-input v-model="item.containerPath"></el-input>
        </el-form-item>
      </el-col>
      <el-col span="2" style="margin: 6px 0px 0px 5px;">
        <el-icon>
          <Plus @click="addFormItem" v-if="index == 0"></Plus>
          <Minus v-if="index > 0" @click="removeCurrentForItem(index)"></Minus>
        </el-icon>
      </el-col>
    </el-row>
    <div class="footer" style="text-align: right">
      <el-button type="primary"   @click="submitForm">提交</el-button>
    </div>
  </el-form>
</template>

<script setup>

import {inject, reactive, ref, toRaw} from "vue";
import {AddLocation, DocumentAdd, FolderAdd, Minus, Plus} from "@element-plus/icons-vue";
import {isEmpty} from "lodash";
import {ElMessage} from "element-plus";
import {AXIOS_NAME} from "@/constant/constant.js"

const $axios = inject(AXIOS_NAME);
const formData = reactive({
  volumeType: "1",
  id: '',
  dockerDeployVolumeList: [{containerPath:"",hostPath:""}]
});
const formRef=  ref(null);

let rules = {};

const addFormItem = () =>{
  formData.dockerDeployVolumeList.push({containerPath:"",hostPath:""});
}

const removeCurrentForItem = (index) =>{
  formData.dockerDeployVolumeList.splice(index,1);
}

const setData = (data) =>{
  formData.id = data.id;
  formData.volumeType = data.volumeType+"";
  formData.dockerDeployVolumeList = data.dockerDeployVolumeList;
  if(formData.dockerDeployVolumeList == undefined || formData.dockerDeployVolumeList == null
      || formData.dockerDeployVolumeList.length <= 0){
    formData.volumeType = "1";
    formData.dockerDeployVolumeList = [{containerPath:"",hostPath:""}];
  }
}

const submitForm = () =>{
  if(isEmpty(formData.id)){
    ElMessage.error("请选择容器!");
    return;
  }
  for(const item of formData.dockerDeployVolumeList){
      if(isEmpty(item.containerPath) || isEmpty(item.hostPath)){
        ElMessage.error("请填写数据!");
        return;;
      }
  }
  $axios.post("/deploy/updateVolumes",toRaw(formData)).then(response =>{
    const data = response.data;
    if(data.code == 1){
      ElMessage.info(data.msg);
      return;
    }
    ElMessage.error(data.msg);
  });
}

defineExpose({setData});
</script>

<style scoped>

</style>